<script lang="ts" setup>
import { ref } from 'vue';

import { AuthenticationLoginExpiredModal, Page } from '@vben/common-ui';
import { preferences } from '@vben/preferences';
import { useUserStore } from '@vben/stores';

import { Alert, Card, TabPane, Tabs } from 'ant-design-vue';

import { getAppstoreSettings } from '#/api/admin/appstore';
import { useAppstoreStore } from '#/store';

import { AppsStore, Plugins, Themes } from './components';
import LoginForm from './components/src/Login.vue';

defineOptions({
  name: 'AdminAppStoreapps',
});
const appstoreStore = useAppstoreStore();
const userStore = useUserStore();
const avatar = computed(() => {
  return userStore.userInfo?.avatar && userStore.userInfo.avatar
    ? userStore.userInfo.avatar
    : preferences.app.defaultAvatar;
});
const activeKey = ref('app');
onMounted(async () => {
  const {
    data: { appstore_settings },
  } = await getAppstoreSettings();
  if (!appstore_settings?.access_token) {
    appstoreStore.showLoginModel = true;
  }
});
</script>

<template>
  <Page>
    <AuthenticationLoginExpiredModal
      v-model:open="appstoreStore.showLoginModel"
      :avatar
    >
      <LoginForm />
    </AuthenticationLoginExpiredModal>
    <Card v-if="!appstoreStore.showLoginModel" class="h-auto">
      <Alert message="温馨提示：建议避开系统使用高峰期进行" type="info" />
      <Tabs v-model:active-key="activeKey">
        <TabPane key="app" force-render tab="应用市场">
          <AppsStore />
        </TabPane>
        <TabPane key="plugin" tab="插件市场">
          <Plugins />
        </TabPane>
        <TabPane key="template" tab="模板市场">
          <Themes />
        </TabPane>
      </Tabs>
    </Card>
  </Page>
</template>
